﻿@using System.Reactive.Disposables
@using Blazor.CoffeeTalesApi.Util
@using Blazor.Core;
@using Blazor.Localization
@using Blazor.Pages.UpdateSetting.Modals.Whitelist
@using Blazor.ViewModels.UpdateSetting;
@inherits SoraniComponentBase<WhitelistEntryViewModel>

@if (ViewModel is not null)
{
    <Flex Direction="FlexDirection.Horizontal" Justify="FlexJustify.SpaceBetween" Style="width: 100%">
        <div style="width: 20%">
            <Tooltip Title="@ViewModel.KeyTip">
                <span @onmouseover="() => ViewModel.RefreshToolTip.Execute().Subscribe().DisposeWith(Disposables)">
                    <Text>@ViewModel.Key.GetJsonRepresent()</Text>
                </span>
            </Tooltip>
        </div>
        <div style="width: 20%">
            <Text Editable EditConfig="_rawEditConfig">@ViewModel.Raw</Text>
        </div>
        <div style="width: 20%">
            <Text Editable EditConfig="_defaultEditConfig">@ViewModel.Default</Text>
        </div>
        <div style="width: 20%">
            <Text Editable EditConfig="_commentEditConfig">@ViewModel.Comment</Text>
        </div>
        <div style="width: 20%">
            <Space>
                <SpaceItem>
                    <Button Type="ButtonType.Link" Icon="@IconType.Outline.Delete"
                            Loading="ViewModel.IsUpdating"
                            OnClick="() => ViewModel.Delete.Execute().Subscribe().DisposeWith(Disposables)"/>
                </SpaceItem>
                <SpaceItem>
                    <Button Type="ButtonType.Link" Icon="@IconType.Outline.Copy"
                            Loading="ViewModel.IsUpdating"
                            OnClick="() => ViewModel.Copy.Execute().Subscribe().DisposeWith(Disposables)"/>
                </SpaceItem>
                <SpaceItem>
                    <Button Type="ButtonType.Link" Icon="@IconType.Outline.Check" Danger
                            Loading="ViewModel.IsUpdating"
                            OnClick="ApplyClickHandler"/>
                </SpaceItem>
            </Space>
        </div>
    </Flex>
}